import React, { useEffect, useState } from "react";
import { Card, Descriptions, Button } from "antd";
import { useNavigate, useParams } from "react-router-dom";
import { reqGetHospitalDetailApi } from "@api/hospital";
import type { HospitalDetail } from "@api/hospital/model/hospitalListType";

export default function HospitalDetailShow() {
  const { id } = useParams();
  const navigate = useNavigate()

  // 根据定义的类型初始化hospitalDetail，如果不进行初始化，获取医院logo时控制台会有图片获取失败的报错
  const [hospitalDetail, setHospitalDetail] = useState<HospitalDetail>({
    bookingRule: {
      cycle: 0,
      releaseTime: "",
      stopTime: "",
      quitDay: 0,
      quitTime: "",
      rule: [],
    },
    hospital: {
      id: 0,
      createTime: "",
      param: {
        hostypeString: "",
        fullAddress: "",
      },
      hoscode: "",
      hosname: "",
      hostype: "",
      provinceCode: "",
      cityCode: "",
      districtCode: "",
      logoData: "",
      intro: "",
      route: "",
      status: 0,
      updateTime: "string",
      isDeleted: 0,
      address: "",
    },
  });

  useEffect(() => {
    getHospitalDetail(id as string);
  }, []);

  // 获取医院详情
  async function getHospitalDetail(id: string) {
    const res = await reqGetHospitalDetailApi(id);
    setHospitalDetail(res);
  }

  return (
    <Card>
      <Descriptions title="基本信息" bordered column={2}>
        <Descriptions.Item label="医院名称">
          {hospitalDetail.hospital?.hosname}
        </Descriptions.Item>
        <Descriptions.Item label="医院logo">
          <img
            height={80}
            src={"data:image/png;base64," + hospitalDetail.hospital?.logoData}
            alt="logo"
          />
        </Descriptions.Item>
        <Descriptions.Item label="医院编码">
          {hospitalDetail.hospital.hoscode}
        </Descriptions.Item>
        <Descriptions.Item label="医院地址">
          {hospitalDetail.hospital.param.fullAddress}
        </Descriptions.Item>
        <Descriptions.Item label="坐车路线" span={2}>
          {hospitalDetail.hospital.route}
        </Descriptions.Item>
        <Descriptions.Item label="医院简介" span={2}>
          {hospitalDetail.hospital.intro}
        </Descriptions.Item>
      </Descriptions>
      <Descriptions
        title="预约规则信息"
        bordered
        column={2}
        style={{ marginTop: 20, marginBottom: 20 }}
      >
        <Descriptions.Item label="预约周期">
          {hospitalDetail.bookingRule.cycle}
        </Descriptions.Item>
        <Descriptions.Item label="放号时间">
          {hospitalDetail.bookingRule.releaseTime}
        </Descriptions.Item>
        <Descriptions.Item label="停挂时间">
          {hospitalDetail.bookingRule.stopTime}
        </Descriptions.Item>
        <Descriptions.Item label="退号事件">
          {hospitalDetail.bookingRule.quitTime}
        </Descriptions.Item>
        <Descriptions.Item label="预约规则" span={2}>
          {hospitalDetail.bookingRule.rule.map((item, index) => (
            <div key={index}>{`${index + 1}、${item}`}</div>
          ))}
        </Descriptions.Item>
      </Descriptions>
      <Button onClick={()=>{
        navigate("/syt/hospital/hospitallist")
      }}>返回</Button>
    </Card>
  );
}
